<template>
  <el-drawer title="部门岗位" v-model="visible" size="60%">
    <el-form size="small" :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button
          type="primary"
          icon="Plus"
          @click="handleInfo"
          v-auth="'company/station/add'"
          >添加岗位</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" height="90%" stripe>
      <el-table-column type="index" label="#" sortable />
      <el-table-column prop="id" label="岗位ID" />
      <el-table-column prop="title" label="名称" />
      <el-table-column label="培训员">
        <template #default="scope">
          {{ scope.row.trainerUser ? scope.row.trainerUser.real_name : "" }}
          {{ scope.row.trainerUser ? scope.row.trainerUser.mobile : "" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleInfo(scope.row)"
            v-auth="'company/station/edit'"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            link
            icon="DeleteFilled"
            @click="delInfo(scope.row.id)"
            v-auth="'company/station/del'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="60%">
      <el-form size="small" v-model="form" ref="formRef" label-width="120px">
        <el-form-item label="岗位名称">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="培训员">
          <el-select
            v-model="form.trainer"
            filterable
            remote
            placeholder="输入用户ID/昵称/姓名/手机号进行搜索"
            remote-show-suffix
            :remote-method="searchUser"
            :loading="search_loading"
            style="width: 240px"
            default-first-option
          >
            <el-option
              v-for="item in userOptions"
              :key="item.user_id"
              :label="item.real_name ? item.real_name : item.nickName"
              :value="item.user_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { delApi, getListAPi, saveApi } from "@/api/company/station";
import { getUserOption } from "@/api/user";
const tableData = ref([]);
const visible = ref(false);
const dialogVisible = ref(false);
const department_id = ref(0);
const dialogTitle = ref("");
const form = ref({
  id: 0,
  department_id: 0,
  title: "",
  sort: 0,
  trainer: "",
});
const formRef = ref<any>(null);
const search_loading = ref(false);
const userOptions = ref<any[]>([]);
const searchUser = (query: string) => {
  if (query !== "") {
    search_loading.value = true;
    getUserOption({
      keyword: query,
    }).then((res: any) => {
      if (res.code == 1) {
        userOptions.value = res.data;
        search_loading.value = false;
      }
    });
  } else {
    userOptions.value = [];
  }
};
function getTableInfo() {
  getListAPi({
    department_id: department_id.value,
  }).then((res) => {
    tableData.value = res.data;
  });
}
function delInfo(id: number) {
  ElMessageBox.confirm("确认要删除此岗位吗?", "警告！", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi(id).then((res: any) => {
        getTableInfo();
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
}

function handleInfo(e?: any) {
  if (e?.id > 0) {
    form.value = {
      id: e.id,
      department_id: e.department_id,
      title: e.title,
      sort: e.sort,
      trainer: e.trainer,
    };
    dialogTitle.value = "编辑岗位";
    searchUser(form.value.trainer);
  } else {
    form.value = {
      id: 0,
      department_id: department_id.value,
      title: "",
      sort: 0,
      trainer: "",
    };
    dialogTitle.value = "添加岗位";
  }
  dialogVisible.value = true;
}

function handleSubmit() {
  saveApi(form.value).then((res: any) => {
    ElMessage.success("编辑成功");
    dialogVisible.value = false;
    getTableInfo();
  });
}
function handleOpen(id) {
  department_id.value = id;
  visible.value = true;
  getTableInfo();
}
defineExpose({
  handleOpen,
});
</script>

<style scoped>
.table-box {
  height: calc(100% - 200px);
}
</style>
